<template>
  <el-dialog class="dialog-form" :model-value="dialogFormVisible" title="查看详情" :before-close="resetForm"
    :close-on-click-modal="false">
    <el-space direction="vertical" :size="20" style="width:100;align-items: flex-start">
      <el-descriptions title="基本信息" :column="1">
        <el-descriptions-item label="所在部门">{{
          form.insName || "--"
        }}</el-descriptions-item>
        <el-descriptions-item label="审批标题">{{
          form.submitTitle || "--"
        }}</el-descriptions-item>
        <el-descriptions-item label="审核信息">{{
          form.submitRemark || "--"
        }}</el-descriptions-item>
        <el-descriptions-item label="发起人员">{{
          form.merchantUserName || "--"
        }}</el-descriptions-item>
        <el-descriptions-item label="发起时间">{{
          new Date(form.createTime).format("yyyy-MM-dd hh:mm") || "--"
        }}</el-descriptions-item>
        <el-descriptions-item label="审核附件" v-if='form.submitResourceUrls'>
          <a :href="item" v-for="(item, index) in form.submitResourceUrls.split(',')" :key="index">
            附件{{ (index + 1) }}{{ (index > 0 ? ',' : '') }}</a>
        </el-descriptions-item>
      </el-descriptions>
    </el-space>
    <el-space direction="vertical" :size="20" style="width:100%;align-items: flex-start">
      <el-descriptions title="摘要信息" :column="1">
        <el-descriptions-item label="审核关联信息" v-if='form.submitInfo'>
          <div v-if='form.submitInfo != "{}" && form.submitInfo != ""'>
            <p v-for="(val, key, index) in  JSON.parse(form.submitInfo)">
              {{ key }}:{{ val }}
            </p>
          </div>
          <div v-else></div>
        </el-descriptions-item>
        <el-descriptions-item label="更多详情" v-if='form.pageRouter'>
          <a :href="form.relationType == 'activity_modify' ? (form.pageRouter + '?auditId=' + form.id) : form.pageRouter"
            target="_blank">
            {{ form.pageRouter }}
          </a>
        </el-descriptions-item>
      </el-descriptions>
    </el-space>
    <div class="dialog-detail" v-if="form.applyGroupList.length">
      <h1>审批流程</h1>
      <el-steps :active="getIndex(form.applyGroupId, form.applyGroupList)" direction="vertical" align-center>
        <el-step v-for='item in form.applyGroupList' :key="item.id"
          :icon="item.groupType == 'notify' ? 'Promotion' : 'Stamp'">
          <template #title>
            <h1>{{ item.name }}·{{ getGroupStatus(item.status) }}<el-tag style="margin-left:10px;"
                v-if="item.applyStepList.length > 1 && item.groupType != 'notify'">{{ getNotify(item.groupType)
                }}</el-tag></h1>
          </template>
          <template #description>
            <div v-for="(ite, index) in item.applyStepList" :key="index" style="margin-bottom:20px;">
              <div style="display:flex;align-items:center;justify-content:space-between;">
                <h3>
                  <el-icon>
                    <Avatar />
                  </el-icon>
                  {{ ite.merchantUserName ? ite.merchantUserName : '&nbsp;' }}
                  <el-icon v-if="ite.syncStatus == 0 && ite.status == 'approve'" color="#67C23A">
                    <CircleCheckFilled />
                  </el-icon>
                  <el-icon v-else-if="ite.syncStatus == 0 && ite.status == 'reject'" color="#F56C6C">
                    <CircleCloseFilled />
                  </el-icon>
                  <el-icon v-else-if="ite.syncStatus == 0 && ite.status == 'notStarted' || ite.status == 'toBeReviewed'"
                    color="#409EFF">
                    <MoreFilled />
                  </el-icon>
                  <span v-else></span>
                </h3>
                <p v-if="ite.syncStatus == 0 && (ite.status == 'approve' || ite.status == 'reject')">{{
                  getStatus(ite.status)
                }}&nbsp;{{ ite.finishTime ? new Date(ite.finishTime).format("yyyy-MM-dd hh:mm") : '' }}</p>
              </div>
              <div style="margin-left:20px;">
                <p v-if="ite.applyMsg">审核回复：{{ ite.applyMsg }}</p>
                <a v-if='ite.applyResourceUrls' :href="ite.applyResourceUrls">附件<el-icon>
                    <Link />
                  </el-icon></a>
              </div>
            </div>
          </template>
        </el-step>
      </el-steps>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="resetForm()">取消</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
import {actApplyInfo} from "@/api/activity"
const props = defineProps({
  dialogFormVisible: {
    type: Boolean,
    default: false
  },
  currentActInfo:{
    type:Object,
    default:()=>({})
  }
})
const form=ref({
  insName:"",
  submitTitle:"",
  submitRemark:"",
  merchantUserName:"",
  createTime:"",
  submitResourceUrls:"",
  applyGroupList:[]
})
watch(()=>props.currentActInfo,(val)=>{
  props.dialogFormVisible&&getDetail(val.id)
})
//获取审核详情
const getDetail=async(id)=>{
  const res=await actApplyInfo({id})
  if(res.code==200){
    if(res.payload){
      form.value=res.payload
    }
  }
}

const emits=defineEmits(['update:dialogFormVisible'])
const resetForm=()=>{
  emits('update:dialogFormVisible',false)
}

const getIndex = (id: number, arr: Array<any>) => {
    let idx = -1
    arr.forEach((ele, index) => {
        if (ele.id == id) {
            idx = index
        }
    });
    return idx
}
const getGroupStatus = (status: string) => {
    if (status == 'doing') {
        return '正在审核'
    } else if (status == 'wait') {
        return '待审核'
    } else if (status == 'finish') {
        return '审核完成'
    } else if (status == 'expire') {
        return '审核撤销'
    }else {
        return ""
    }
};
const getNotify = (type: string) => {
    if (type == 'and') {
        return '并签'
    } else if (type == 'or') {
        return '或签'
    } else if (type == 'notify') {
        return '抄送'
    } else {
        return ""
    }
}
const getStatus = (status: string) => {
    if (status == 'notStarted') {
        return '未开始'
    } else if (status == 'toBeReviewed') {
        return '待审核'
    } else if (status == 'approve') {
        return '审核通过'
    } else if (status == 'reject') {
        return '审核拒绝'
    } else if (status == 'expire') {
        return '审核失效'
    } else {
        return ""
    }
};
</script>
<style lang="scss" scoped></style>